<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('页面详情')" />
	<link th:href="@{/css/common.css}" rel="stylesheet"/>
	<link th:href="@{/css/detail.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
	<div class="content">
		<input th:field="*{page.id}" id="id" type="hidden">
		<div class="content-box">
			<div class="info-head">
				<p class="pull-left">
					<span th:text="${page.pageName}"></span>
				</p>
				<p class="pull-right">
					<span th:if="${interfaceUser} != null">
<!--						<img class="head-img" th:src="@{/img/login-background.jpg}"/>-->
						<span th:text="${interfaceUser.username}"></span>(<span th:text="${interfaceUser.roleName}"></span>)
					</span>
					<span th:if="${owner} != null">
						<select name="status" id="status" th:with="type=${@dict.getType('status')}">
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${interfaceUser.objectStatus}"></option>
						</select>
					</span>
				</p>
			</div>
			<div class="tips" th:text="${page.pageDescription}"></div>
			<div class="table-info">
				<ul class="list-group">
					<li class="list-group-item">
						<span>模块聚合页</span>
						<span th:text="${page.isModuleAggregation=='Y'?'是':'否'}"></span>
					</li>
					<li class="list-group-item">
						<span>风险点</span>
						<span th:text="${page.isRask=='Y'?'是':'否'}"></span>
					</li>
					<li class="list-group-item">
						<span>终端类型</span>
						<span th:text="${page.terminalType=='1'?'PCweb': (page.terminalType=='2' ? 'H5' : (page.terminalType=='3' ? 'APP' : '微信小程序'))}"></span>
					</li>
					<li class="list-group-item">
						<span>分类名称</span>
						<span th:text="${page.categoryName}"></span>
					</li>
					<li class="list-group-item">
						<span>父类名称</span>
						<span th:text="${page.parentName}"></span>
					</li>
					<li class="list-group-item">
						<span>创建人</span>
						<span th:text="${page.createBy}">王树立</span>
					</li>
					<li class="list-group-item">
						<span>创建时间</span>
						<span th:text="${#dates.format(page.createTime, 'yyyy-MM-dd HH:mm:ss')}">2021.11.21 13:21</span>
					</li>
					<li class="list-group-item"></li>
					<li class="list-group-item">
						<span>更新人</span>
						<span th:text="${page.updateBy}">王树立</span>
					</li>
					<li class="list-group-item">
						<span>更新时间</span>
						<span th:text="${#dates.format(page.updateTime, 'yyyy-MM-dd HH:mm:ss')}">2021.11.21 13:21</span>
					</li>
				</ul>
			</div>
			<ul class="nav nav-tabs navtabs contentTab" role="tablist">
				<li class="active"><a href="#content-img" role="tab" data-action = "relationImg" data-toggle="tab">图片</a></li>
				<li><a href="#content-bff" role="tab" data-toggle="tab" data-action = "relationBffList">关联BFF接口</a></li>
				<li><a href="#content-usage" role="tab" data-toggle="tab" data-action = "relationUsageList">关联用况</a></li>
				<li><a href="#content-table" role="tab" data-toggle="tab" data-action = "relationTableList">关联表</a></li>
				<li><a href="#content-question" role="tab" data-toggle="tab" data-action = "relationQuestionList">问题备注</a></li>
			</ul>
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active mt20 content-page" id="content-img"></div>
				<div role="tabpanel" class="tab-pane active mt20 " id="content-bff"></div>
				<div role="tabpanel" class="tab-pane mt20 content-usage" id="content-usage"></div>
				<div role="tabpanel" class="tab-pane content-table mt20" id="content-table"></div>
				<div role="tabpanel" class="tab-pane mt20 content-question" id="content-question"></div>
			</div>
		</div>
	</div>
</div>
</div>
</div>
</body>
<th:block th:include="include :: footer"/>

<script id="contentPageTpl" type="text/template">
	<div>
		<p>
			<img th:src="@{/img/document.png}" style = "margin-top:-3px;"/>
			<span>全图({{d.commonImgList.length}})</span>
		</p>
		<ul class="list-group">
			{{# layui.each(d.commonImgList, function(indexB, b){ }}
			<li class="list-group-item">
				<div><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/></div>
				<p style="text-align: center">{{b.fileName}}</p>
			</li>
			{{# }); }}
		</ul>
	</div>

	<div>
		<p>
			<img th:src="@{/img/document.png}" style = "margin-top:-3px;"/>
			<span>组件图({{d.componentImgList.length}})</span>
		</p>
		<ul class="list-group">
			{{# layui.each(d.componentImgList, function(indexB, b){ }}
			<li class="list-group-item"><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/><p style="text-align: center">{{b.fileName}}</p></li>
			{{# }); }}
		</ul>
	</div>
</script>

<script id="contentIntfTpl" type="text/template">
	<table class="table">
		<thead>
		<tr>
			<th>编号</th>
			<th>协议类型</th>
			<th>接口名称</th>
			<th>接口地址</th>
			<th>接口类型</th>
			<th>是否分页</th>
			<th>所有内容条数</th>
			<th>页数</th>
			<th>页面内容条数</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		{{# layui.each(d, function(index, a){ }}
		<tr>
			<td>{{a.id || '一'}}</td>
			<td>{{# if(a.interfaceType=='1') { }} GET {{# } else if(a.interfaceType == '2') { }} POST {{# } else if(a.optType == '3') { }} PUT {{#} else { }}DELETE{{#}}}</td>
			<td>{{a.interfaceName || '一'}}</td>
			<td>{{a.interfaceUrl || '一'}}</td>
			<td>{{# if(a.optType=='1') { }} 增 {{# } else if(a.optType == '2') { }} 删 {{# } else if(a.optType == '3') { }} 改 {{#} else { }}查{{#}}}</td>
			<td>{{# if(a.isPage=='N'){ }}否{{# } else {}}是{{#} }}</td>
			<td>{{a.total || '一'}}</td>
			<td>{{a.page || '一'}}</td>
			<td>{{a.pageSize || '一'}}</td>
			<td><a href="#" onclick="bffDetail({{a.id}})">查看详情</a></td>
		</tr>
		{{# }); }}
		</tbody>
	</table>
</script>

<!--关联字段模板-->
<script id="contentTableTpl" type="text/template">
	{{# layui.each(d, function(index, a){ }}
		<div class="retation-table">
			<p class="blue-background">
				<img th:src="@{/img/table.png}">
				<span>{{a.tableName}}&nbsp;&nbsp;{{a.tableEnName}}</span>
				<span  style="color: #0088FF;float: right;margin-right: 12px;"><a class = "table-detail" tableId = "{{a.id}}">查看详情</a></span>
			</p>
			<ul class="list-group">
				{{# layui.each(a.fieldInfoList, function(indexB, b){ }}
					{{# if(b.categorySpace) { }}
						<li class="list-group-item space"></li>
					{{# }}}
					<li class="list-group-item">
						<font>{{# if(b.fieldType=='1') { }} PK {{# } else if(b.fieldType == '2') { }} FK {{#} else { }}-{{#}}}</font>
						<span title="{{b.fieldName || '一'}}">{{b.fieldName || '一'}}</span>
						<span>
							{{b.fieldEnName || '一'}}
							{{# if(b.fieldLength) { }}
								({{b.fieldLength}})
							{{# } }}
						</span>
						<span>{{# if(b.fieldDataType=='1') { }} 文本 {{# } else if(b.fieldDataType == '2') { }} 数字 {{#} else { }}日期{{#}}}</span>
					</li>
				{{# }); }}
			</ul>
		</div>
	{{# }); }}
</script>
<!--关联用况模板-->
<script id="contentUsageTpl" type="text/template">
	<ul class="list-group">
		{{# layui.each(d, function(index, a){ }}
		<li class="list-group-item">
			<div class="list-tit">
				<p>
					<span>{{# if(a.fbType=='1') { }} 前台 {{#} else { }}后台{{#}}}</span>
					<span>{{# if(a.usageType=='1') { }} 增 {{# } else if(a.usageType == '2') { }} 删 {{# } else if(a.usageType == '3') { }} 改 {{#} else { }}查{{#}}}</span>
					<span>{{a.usageyName || '一'}}</span>
					<a class="pull-right" style = "cursor: pointer;" onclick="usageDetail({{a.id}})">查看详情</a>
				</p>
				<p>
					<span>用况架构</span>
					<span>
							{{# if(a.clientType=='1') { }} PCweb {{# } else if(a.clientType == '2') { }} H5 {{# } else if(a.clientType == '3') { }} APP {{#} else { }} 微信小程序 {{#}}}
							· {{# if(a.isAlone=='1') { }} 单模块 {{#} else { }} 非单模块 {{# }}}
							· {{# if(a.versionType=='1') { }} 新功能 {{# } else if(a.versionType == '2') { }} 优化 {{#} else { }} 废弃 {{#}}}
						</span>
				</p>
			</div>
			<div class="list-content">
				<p>用况故事</p>
				<p>{{a.usageStory || '一'}}</p>
			</div>
			<div class="list-content">
				<p>价值描述</p>
				<p>{{a.valueDescription || '一'}}</p>
			</div>
			<div class="list-content">
				<p>业务实现逻辑</p>
				<p>{{a.businessImplDescription || '一'}}</p>
			</div>
			<div class="list-content">
				<p>优化或废弃说明</p>
				<p>{{a.versionDescription || '一'}}</p>
			</div>
		</li>
		{{# }); }}
	</ul>
</script>

<!--问题备注模板-->
<script id="contentQuestionTpl" type="text/template">
	{{# if(d.questionCount== 0){ }}
	<div class="empty">
		<p><img th:src="@{/img/empty.png}"/></p>
		<p>暂无问题备注</p>
		<p><button type="button" class="btn btn-primary add-question">提交问题</button></p>
	</div>
	{{# } else {}}
	<div class="questions">
		<p class="pull-left">当前共{{d.questionCount}}个问题</p>
		{{# if(d.owner) { }}
		<a class="pull-right add-question" style = "cursor: pointer;"><img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;margin-top: -3px;" />提问题</a>
		{{# } }}
	</div>
	<ul class="list-group ques-list">
		{{# layui.each(d.list, function(index, a){ }}
		<li class="list-group-item">
			<div>
				<div class="pull-left">
							<span><img class="head-img list-head-img" th:src="@{/img/login-background.jpg}"/>· {{a.createBy || '一'}} · {{a.createTime || '一'}}<span>
				</div>
				{{# if(d.owner) { }}
				<div class="pull-right">
					<icon class="icon del delete-question" data-id="{{a.id}}" style = "cursor: pointer;"></icon>
				</div>
				{{# } }}
			</div>
			<p>{{a.title || '一'}}</p>
			<p>{{a.description || '一'}}</p>
			<ul class="list-group-horizontal">
				{{# layui.each(a.fileInfList, function(indexB, b){ }}
				<li class="list-group-item" style="box-shadow:none"><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/><p style="text-align: center">{{b.fileName}}</p></li>
				{{# }); }}
			</ul>
		</li>
		{{# }); }}
	</ul>

	{{#} }}
</script>

<script th:inline="javascript">
    // 接口uri
    const prefix = ctx + "page/page";
	var owner = [[${owner}]];
    $(function () {
		// 接口详情默认加载
		relationImg();

		$("#status").change(function () {
			var value = $(this).val();
			var config = {
				url: ctx + "userDataAuth/userDataAuth/updateStatus",
				type: "POST",
				dataType: "json",
				data: "objectId=" + $("#id").val() + "&objectType=3&objectStatus=" + value,
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$.modal.closeLoading();
					if (result.code == web_status.SUCCESS) {
						$.modal.msgSuccess("更新成功");
					} else if (result.code == web_status.WARNING) {
						$.modal.alertWarning(result.msg)
					} else {
						$.modal.alertError(result.msg);
					}
				}
			};
			$.ajax(config);
		})
	});

    $("body").on('click','.del',function(){
        $(this).parents(".list-group-item").remove();
    }).on('click', ".table-detail", function () {
	    var tableId = $(this).attr("tableId");
		$.operate.addTab2("表详情", ctx + "interface/interface/table_detail/" + tableId);
    }).on('click', ".add-question", function () {
		var title = "提问题";
		var pageId = $("input[name='id']").val();
		var url = ctx + "interface/interface/add_question/" + pageId + "/3";
		var width = 800;
		var height = $(window).height() - 50;
		$.modal.open(title, url, width, height);
	}).on('click','.delete-question',function(){
		var id = $(this).attr("data-id");
		var config = {
			url: ctx + "questionInfo/questionInfo/remove?ids=" + id,
			type: "POST",
			dataType: "json",
			data: null,
			beforeSend: function () {
				$.modal.loading("正在处理中，请稍后...");
			},
			success: function(result) {
				$.modal.closeLoading();
				if (result.code == web_status.SUCCESS) {
					$.modal.msgSuccess("删除成功");
					relationQuestionList();
				} else if (result.code == web_status.WARNING) {
					$.modal.alertWarning(result.msg)
				} else {
					$.modal.alertError(result.msg);
				}
			}
		};
		$.ajax(config);
	}).on('click', ".partPage", function(e) {
		var url = $(this).attr("src");
		var json = {
			"title": "预览",
			"start": 0,
			"data": [{
				"src": url,
			}]
		};
		layer.photos({
			photos: json,
			closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
			anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
		});
	})

    /**标签切换事件*/
    $(".contentTab a").click(function (e) {
        var action = $(this).data("action");
        if(action) {
			window[action]();
		}
    });

	function relationImg() {
		var params = {};
		params.pageId = $("input[name='id']").val();
		var resultJson;
		var config = {
			url: prefix + "/imgList",
			type: "POST",
			dataType: "json",
			async: false,
			data: params,
			success: function (result) {
				if (result && result.code == 0) {
					resultJson = result.data;
				}
			}
		};
		$.ajax(config);

		var contentPageTplHtml = $("#contentPageTpl").html();
		laytpl(contentPageTplHtml).render(resultJson, function (html) {
			$("#content-img").empty();
			$("#content-img").append(html);
		});
	};

	function relationBffList() {
		var params = {};
		params.pageId = $("input[name='id']").val();
		var resultJson;
		var config = {
			url: prefix + "/bffList",
			type: "POST",
			dataType: "json",
			async: false,
			data: params,
			success: function (result) {
				if (result && result.code == 0) {
					resultJson = result.data;
				}
			}
		};
		$.ajax(config);
		if(!resultJson) {
			return false;
		}
		var contentIntfTplHtml = $("#contentIntfTpl").html();
		laytpl(contentIntfTplHtml).render(resultJson, function (html) {
			$("#content-bff").empty();
			$("#content-bff").append(html);
		});
    }

	/**
	 * 关联用况函数
	 */
	function relationUsageList() {
		var params = {};
		params.pageId = $("input[name='id']").val();
		var resultJson;
		var config = {
			url: prefix + "/usageList",
			type: "POST",
			dataType: "json",
			async: false,
			data: params,
			success: function (result) {
				if (result && result.code == 0) {
					resultJson = result.data;
				}
			}
		};
		$.ajax(config);
		if(!resultJson) {
			return false;
		}
		var contentUsageTplHtml = $("#contentUsageTpl").html();
		laytpl(contentUsageTplHtml).render(resultJson, function (html) {
			$("#content-usage").empty();
			$("#content-usage").append(html);
		});
	};

	/**
	 * 关联表列表函数
	 */
	function relationTableList() {
		var params = {};
		params.pageId = $("input[name='id']").val();
		var resultJson;
		var config = {
			url: prefix + "/tableList",
			type: "POST",
			dataType: "json",
			async: false,
			data: params,
			success: function (result) {
				if (result && result.code == 0) {
					resultJson = result.data;
				}
			}
		};
		$.ajax(config);
		if(!resultJson) {
			return false;
		}
		$.each(resultJson, function (index, a) {
			if (null == a.fieldInfoList || 0 == a.fieldInfoList.length) {
				return;
			}
			let category = a.fieldInfoList[0].category;
			$.each(a.fieldInfoList, function (indexB, b) {
				b.categorySpace = false;
				if (category != b.category) {
					b.categorySpace = true;
					category = b.category;
				}
			});
		});
		var contentTableTplHtml = $("#contentTableTpl").html();
		laytpl(contentTableTplHtml).render(resultJson, function (html) {
			$("#content-table").empty();
			$("#content-table").append(html);
		});
	};

	/**
	 * 问题备注
	 */
	function relationQuestionList() {
		var params = {};
		params.objectId = $("input[name='id']").val();
		params.objectType = "3";
		var resultJson;
		var config = {
			url: ctx + "interface/interface/questionList",
			type: "POST",
			dataType: "json",
			async: false,
			data: params,
			success: function (result) {
				if (result && result.code == 0) {
					resultJson = result.data;
				}
			}
		};
		$.ajax(config);
		if(!resultJson) {
			return false;
		}
		var data = {};
		data.list = resultJson;
		data.questionCount = resultJson.length;
		data.owner = owner;
		var contentQuestionTplHtml = $("#contentQuestionTpl").html();
		laytpl(contentQuestionTplHtml).render(data, function (html) {
			$("#content-question").empty();
			$("#content-question").append(html);
		});
	};

	function usageDetail(id) {
		$.operate.addTab2("用况详情", ctx + "usage/usage/detail/" + id);
	}


	function bffDetail(id) {
		$.operate.addTab2("接口详情", ctx + "interface/interface/bffDetail/" + id);
	}
</script>
</html>
